<template>
    <div style="background-color: #fff">
        <!--导航栏-->
        <nav  class="header navbar-default navbar-fixed-top">
            <div>
                <div class="col-xs-6  col-lg-6">
                    <ul  class="nav navbar-nav ">
                        <li><router-link to="/home"><img src="../images/top.png" alt="" width="100px"></router-link></li>
                        <li><router-link to="/">产品</router-link></li>
                        <li><router-link to="/article-list">社区</router-link></li>
                        <li><router-link to="/article-details?name=视频教学">视频教学</router-link></li>
                        <li><router-link to="/article-details?name=关于我们">关于我们</router-link></li>
                    </ul>
                </div>
                <div class="col-xs-6 col-lg-6">
                    <div class="login col-xs-1 text-right" @click="login">
                        {{user?user.user.nickname:''}} &nbsp;<span class="glyphicon glyphicon-user" ></span>
                    </div>
                    <!--<div class="login col-xs-1 text-right">-->
                    <!--<span class="glyphicon glyphicon-shopping-cart" ></span>-->
                    <!--</div>-->
                    <div class="col-xs-5 text-center" style="text-align: right">
                        <form action="#" class="navbar-form navbar-right" @submit="submit">
                            <div class="input-group">
                                <input class="form-control" type="text" v-model="keyword"/>
                                <span class="input-group-addon">
                                    <button class="glyphicon glyphicon-search"></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </nav>

        <!--中间页面-->
        <div class="main-content">
            <router-view class=""></router-view>
        </div>
        <!--底部导航-->
        <footer class="footer">
            <div class="return-top text-center" @click="returnTop">
                <i class="glyphicon glyphicon-menu-up"></i>
            </div>
            <div class="list">
                <div class="newline col-xs-4 col-md-3 col-lg-3">
                    <p>产品</p>
                    <span v-if="menus">
                         <router-link :to="'/commodity-list?id='+menus.id+'&menu_set_id='+li.id+'&group_name='+li.group_name"
                                      v-for="li in menus.menuSets">{{li.name}}</router-link>
                    </span>

                </div>
                <div class="col-xs-2">
                    <p>社区</p>
                    <a href="http://weibo.com/rockmusiclife" target="_blank">微博</a><br>
                    <a href="/">微信</a><br>
                    <a href="http://www.soku.com/search_video/q_%E7%AE%A1%E4%B9%90%E6%95%99%E5%AD%A6?f=1&kb=020200000000000_%E7%AE%A1%E4%B9%90%E5%9F%B9%E8%AE%AD_%E7%AE%A1%E4%B9%90%E6%95%99%E5%AD%A6" target="_blank">优酷土豆</a>
                </div>
                <div class="col-xs-2">
                    <p>支持</p>
                    <router-link to="/article-details?name=视频教学">视频教学</router-link><br>
                    <router-link to="/article-details?name=用户手册">用户手册</router-link><br>
                </div>
                <div class="col-xs-2">
                    <p>关于我们</p>
                    <router-link to="/article-details?name=企业战略">企业战略</router-link><br>
                    <router-link to="/article-details?name=关于我们">关于我们</router-link><br>
                </div>
            </div>
            <div class="text-center">隐私声明 | 使用条款</div>
            <div class="text-center">技术支持@江苏界享电子商务有限公司  云龙区电商科技产业园</div>
            <div class="text-center copyright">版权所有&copy;2017珠海市香洲音乐人管乐培训部 粤ICP备17116101号-1</div>
        </footer>
    </div>
</template>

<script>
    require('./app.css');
    var VueRouter=require('vue-router');
    Vue.use(VueRouter);
    var router = new VueRouter({
        mode: 'history',
        base: __DEBUG__ ? '/music' : '/',
        scrollBehavior: function(to, from, savedPosition) {
            if (savedPosition) {
                return savedPosition
            } else {
                return { x: 0, y: 0 }
            }
        },
        routes:[
            { path: '/', component: function (resolve) { require(['../html/home.vue'], resolve);}},
            { path: '/home', component: function (resolve) { require(['../html/home.vue'], resolve);}},
            { path: '/article-details', component: function (resolve) { require(['../html/article-details.vue'], resolve);}},
            { path: '/article-list', component: function (resolve) { require(['../html/article-list.vue'], resolve);}},
            { path: '/confirm', component: function (resolve) { require(['../html/confirm.vue'], resolve);}},
            { path: '/commodity-details', component: function (resolve) { require(['../html/commodity-details.vue'], resolve);}},
            { path: '/commodity-list', component: function (resolve) { require(['../html/commodity-list.vue'], resolve);}},
            { path: '/comment', component: function (resolve) { require(['../html/comment.vue'], resolve);}},
            { path: '/order', component: function (resolve) { require(['../html/order.vue'], resolve);}},
            { path: '/goodslist', component: function (resolve) { require(['../html/goodsList.vue'], resolve);}},

        ]
    });

    module.exports={
        router: router,
        data:function () {
            return{
                user:null,
                keyword:'',
                menus:[],
            }
        },
        methods:{
            login:function () {
                var _self = this;
                if(this.user){
                    this.$router.push('/order');
                }else{
                    JxSdk.user.info().then(function (data) {
                        _self.user = data;
                    });
                }
            },
            submit:function (e) {
                var e= e||event;
                e.preventDefault();
                this.$router.push('/goodslist?keyword='+this.keyword);
            },
            returnTop:function () {
                $('body,html').animate({scrollTop: 0});
            },
        },
        created:function(){
            var _self=this;
            JxSdk.menu.list('2', '网站分类').then(function (data) {
                _self.menus=data.menus[0];
            });
        },
        mounted:function () {
            var _self=this;

//            JxSdk.ready(function () {
                JxSdk.user.silentInfo().then(function (data) {
                    _self.user=data;
                });

//            });
            JxSdk.console.entry('.copyright');

        }
    }

</script>

